import React, { useEffect, useState, useRef } from "react"
import { View, Text, Image, Swiper, SwiperItem, Video, Navigator } from "@tarojs/components"
import { navigateTo, createVideoContext, pageScrollTo, useDidShow, useDidHide, login } from "@tarojs/taro"
import "@@/pages/index/index.scss"
import service from "@@/services/data.service"
import { activityIntro, activityIntroDetail, partnerList, menubarType } from "@@/interfaces/api.interface"
import proxy from "../../../config/proxy"
const TitleAndLine = (props: { title: string }) => {
    return (
        <View className="titleBox">
            <View className="title">{props.title}</View>
            {/* <View className="line"></View> */}
        </View>
    )
}

const IndexPage = ({ exhibitionId }: { exhibitionId: number | undefined }) => {
    const [videoList, setVideoList] = useState<activityIntro[]>([])
    const [videoIndex, setVideoIndex] = useState(0)
    const videoRef = useRef<any>([])
    const getRef = ref => {
        videoRef.current.push(ref)
    }

    useEffect(() => {
        if (exhibitionId) {
            // 精彩片段列表
            service.getVideo({ exhibitionId, pageSize: 3 }).then(rslt => {
                setVideoList(rslt.data.entities)
            })
        }
    }, [])
    const changeVideoIndex = e => {
        // console.log(e)
        setVideoIndex(e.detail.current)
        if (TARO_ENV === "h5") {
            // console.log(videoRef.current)
            for (let i of videoRef.current) {
                i && i.pause()
            }
        }
        if (TARO_ENV === "weapp") {
            for (let item of videoList) {
                const videoContextPrev = createVideoContext(`video_${item.id}`)
                videoContextPrev.pause()
                // console.log("有效dom", `#video_${item.id}`, videoContextPrev)
            }
        }
    }
    const changeVideoSwipe = (cur: number) => () => {
        if (cur >= 0 && cur < videoList.length) {
            setVideoIndex(cur)
            if (TARO_ENV === "h5") {
                // console.log(videoRef.current)
                for (let i of videoRef.current) {
                    i && i.pause()
                }
            }
            if (TARO_ENV === "weapp") {
                for (let item of videoList) {
                    const videoContextPrev = createVideoContext(`video_${item.id}`)
                    videoContextPrev.pause()
                    // console.log("有效dom", `#video_${item.id}`, videoContextPrev)
                }
            }
        }
    }
    return <View>
        {
            !!videoList[0] && (
                <View className="partBox">
                    <TitleAndLine title="精彩片段" />
                    {!!videoList.length && (
                        <Swiper className="fancyVideo" current={videoIndex} onChange={changeVideoIndex}>
                            {videoList.map(item => {
                                return (
                                    <SwiperItem key={item.id}>
                                        <Video
                                            ref={getRef}
                                            id={`video_${item.id}`}
                                            controls={true}
                                            autoplay={false}
                                            initialTime={0}
                                            loop={false}
                                            src={`${proxy.sourceUrl}/${item.url}`}
                                            poster={`${proxy.sourceUrl}/${item.image}`}
                                            muted={false}
                                            className="actVideo"
                                        ></Video>
                                    </SwiperItem>
                                )
                            })}
                        </Swiper>
                    )}
                    <View className="videoOperate">
                        <View className="left" onClick={changeVideoSwipe(videoIndex - 1)}>
                            <Image mode="aspectFit" src={require("@@/assets/img/swiperArrowsL.png")}></Image>
                        </View>
                        <View className="videoIndex">
                            <Text>{videoIndex + 1}</Text>/{videoList.length}
                        </View>
                        <View className="right" onClick={changeVideoSwipe(videoIndex + 1)}>
                            <Image mode="aspectFit" src={require("@@/assets/img/swiperArrowsR.png")}></Image>
                        </View>
                    </View>
                </View>
            )
        }
    </View>
}

export default IndexPage